import Vue from 'vue';
// 自动引入vant-ui组件库
import Vant, { Toast } from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

//引入axios
import axios from 'axios';
Vue.prototype.$axios = axios;
// 把所有import放在最上面避免跳转错误
import App from './App.vue';
import router from './router';

// 设置一个axios的基准路径
axios.defaults.baseURL = 'http://127.0.0.1:3000';

// 响应拦截器,接收一个参数对所有响应做处理
axios.interceptors.response.use((res) => {
	console.log(res.data);
	// 接口响应错误,会有一个以4开头的状态码
	// .then的错误移到这里统一编写
	const { message, statusCode } = res.data;
	const errRegExp = /^4\d{2}$/;
	if (errRegExp.test(statusCode)) {
		// 如果状态码以4开头代表响应错误
		console.log('拦截器捕捉到的错误');
		console.log('错误的信息是', message);
		// 把组件内.then里的else和else if响应的错误放在这里统一弹窗
		Toast.fail(message);
	}
	if (message == '用户信息验证失败') {
		// 失败先清空在跳转
		localStorage.removeItem('token');
		localStorage.removeItem('userId');
		router.replace({
			path: '/login'
		});
	}
	// 一定要使用return放行
	return res;
});
// 全局拦截axios请求
axios.interceptors.request.use((config) => {
	if (!config.headers.Authorization && localStorage.getItem('token')) {
		config.headers.Authorization = localStorage.getItem('token');
	}
	return config;
});

// 引入路由之后,可以添加一个全局的导航守卫
router.beforeEach((to, from, next) => {
	console.log('拦截所有路由');
	// console.log(to)
	const listNeedAuth = [ '/personal', '/edit' ];
	if (listNeedAuth.indexOf(to.path) >= 0) {
		if (localStorage.getItem('token')) {
			return next();
		} else {
			return router.push({
				path: '/login'
			});
		}
	}
	next();
});

Vue.config.productionTip = false;

new Vue({
	router,
	render: (h) => h(App)
}).$mount('#app');
